Getting Started with React Redux | 您所在的位置:网站首页 › redux courg › Getting Started with React Redux |
Getting Started with React Redux React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state. InstallationReact Redux 8.x requires React 16.8.3 or later / React Native 0.59 or later, in order to make use of React Hooks. Using Create React AppThe recommended way to start new apps with React and Redux is by using the official Redux+JS template or Redux+TS template for Create React App, which takes advantage of Redux Toolkit and React Redux's integration with React components. # Redux + Plain JS templatenpx create-react-app my-app --template redux# Redux + TypeScript templatenpx create-react-app my-app --template redux-typescriptAn Existing React AppTo use React Redux with your React app, install it as a dependency: # If you use npm:npm install react-redux# Or if you use Yarn:yarn add react-reduxYou'll also need to install Redux and set up a Redux store in your app. React-Redux v8 is written in TypeScript, so all types are automatically included. API OverviewProviderReact Redux includes a component, which makes the Redux store available to the rest of your app: import React from 'react'import ReactDOM from 'react-dom/client'import { Provider } from 'react-redux'import store from './store'import App from './App'// As of React 18const root = ReactDOM.createRoot(document.getElementById('root'))root.render( )HooksReact Redux provides a pair of custom React hooks that allow your React components to interact with the Redux store. useSelector reads a value from the store state and subscribes to updates, while useDispatch returns the store's dispatch method to let you dispatch actions. import React from 'react'import { useSelector, useDispatch } from 'react-redux'import { decrement, increment, incrementByAmount, incrementAsync, selectCount,} from './counterSlice'import styles from './Counter.module.css'export function Counter() { const count = useSelector(selectCount) const dispatch = useDispatch() return ( dispatch(increment())} > + {count} dispatch(decrement())} > - {/* omit additional rendering output here */} )}Learning React ReduxLearn Modern Redux LivestreamRedux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs. See the "Learn Modern Redux" show notes page for a transcript and links to the example app source. Help and DiscussionThe #redux channel of the Reactiflux Discord community is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us! You can also ask questions on Stack Overflow using the #redux tag. Docs TranslationsPortuguese |
CopyRight 2018-2019 实验室设备网 版权所有 |